<script setup lang="ts">
defineProps(
    {
      content: {
        type: Array,
        default: []
      }
    }
)
</script>

<template>
  <div class="common-list">
    <a
        class="item"
        v-for="(item,index) in content"
        :href="item.url"
        :key="index">
      <img :src="item.coverImg" alt="" class="left">
      <div class="right">
        <div class="title">
          {{item.title}}
        </div>
        <div class="userinfo">
          <RobotOutlined />
          <div class="name">{{item.articleAbstract}}</div>
        </div>
        <div class="time">
          {{item.time}}
        </div>
      </div>
    </a>
  </div>
</template>
<style scoped lang="scss">
.common-list{
  overflow: auto;
  //height: 500px;
  .item{
    display: flex;
    margin-bottom: 10px;
    color: black;
    &:hover{
      color: red;
    }
    .left{
      width: 100px;
      height: 80px;
      border-radius: 10px;
      margin-right: 10px;
    }
    .right{
      width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        overflow : hidden;
        text-overflow: ellipsis;//当对象内文本溢出时显示省略标记
        display: -webkit-box;
        -webkit-line-clamp:2;//这边的2指的是两行
        -webkit-box-orient: vertical;
      }
      .userinfo{
        color: rgb(121, 133, 153);
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }
  }
}
</style>
